<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册百度账号</title>
    <style>
        b{
            font-size: 14px;
        }
        .div{
            margin:50px auto;
            width: 600px;
            height: 800px;
        }
        .passbutton{

            height:60px;
            font-size:14px;
            cursor:pointer;
            color:gray;
            background: #F7F7F7;
            border: 1px solid darkgray;

        }
        .registerbutton{
            margin-left:30px;
            width:320px;
            height:50px;
            color:white;
            border-radius: 5px;
            background: #3f89ec;
            font-weight: 600;
            font-size:16px;
            border: 0
        }
    </style>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
    </script>
</head>
<body>
    <div class="div">
        <img src="https://passport.baidu.com/export/reg/logo-tieba.png" alt="baidu"> |
        <font color="gray"> <b> 注册百度账号</b> </font><br>

    <HR><br><br>
    <font color="gray"> <b> 用户名</b> </font> <input id="usna" type="username" name="username" placeholder="请设置用户名" onblur="blur_username()" onfocus="focus_username()" style="width:300px;height:35px">
        <div id="result_name" style="font-size:10px;display: inline;"></div><br><br>
    <font color="gray"> <b> 手机号</b> </font> <input id="tele" type="text" name="telephone" placeholder="可用于登录和找回密码" onblur="blur_telephone()" onfocus="focus_tele()" style="width:300px;height:35px">
        <div id="result_tele" style="font-size:10px;display: inline;"></div><br><br>
    <font color="gray"> <b> 密&nbsp;&nbsp;&nbsp;码</b> </font>   <input id="pass" type="password" name="password" onblur="blur_passwd()" onfocus="focus_passwd()" style="width:300px;height:35px" placeholder="请设置登录密码">
        <div id="result_pass" style="font-size:10px;display: inline;float:right;margin-top:-20px;"></div><div id="result_pass2" style="display: inline;"></div><br><br>
    <font color="gray"> <b> 验证码</b> </font> <input type="text" name="authcode"  placeholder="请输入验证码" style="width:185px;height:35px">
    <button type="button"  style="width=160px;height:38px" class="passbutton" onclick="alert('验证码已发出，请注意查收！')" >获取短信验证码</button><br><br>
    <div style="font-size: 12px;margin-left: 30px;">
        <input type="checkbox" name="check"  required="required">阅读并接受
        <a href="http://passport.baidu.com/static/passpc-account/html/protocal.html">《百度用户协议》</a>
        及<a href="https://www.baidu.com/duty/yinsiquan.html">百度隐私权保护声明</a><br><br>

    </div>
        <input type="button" class="registerbutton" name="login" value="注册">
    </div>
    <script>
        var flag = false;
        function focus_username()
        {
            var nameObj = document.getElementById("result_name");
            nameObj.innerHTML = "设置后不可更改，" +
                "最长14个英文或7个汉字";
            nameObj.style.color="darkgray";
        }
        function focus_passwd()
        {
            var nameObj = document.getElementById("result_pass");
            nameObj.innerHTML = "<p>长度为6-14个字符</p>" +
                "<p>支持数字，大小写字母和标点符号</p>" +
                "<p>不允许有空格</p>";
            nameObj.style.color="darkgray";
        }
        function focus_tele()
        {
            var nameObj = document.getElementById("result_tele");
            nameObj.innerHTML = "请输入中国大陆手机号，" +
                "其他用户不可见";
            nameObj.style.color="darkgray";
        }
		
		function blur_username()
        {
            var nameObj = document.getElementById("result_name");
            var userflag = checkusername();
            if (userflag === "1")
            {
                nameObj.innerHTML = "<img src='ok_small.png'>";
            }
            else
            {
                nameObj.innerHTML = "<img src='err_small.png'>";
            }

        }
        
        function checkusername() {
            var nameinput = document.getElementById("usna").value
            l = nameinput.length;
            if (  l <= 14 && l >= 1  ) {
                return "1";
            }
            else {
                return "0";
            }
        }


        function blur_telephone()
        {
            var nameObj = document.getElementById("result_tele");
            var userflag = checktelephone();
            if (userflag === "1")
            {
                nameObj.innerHTML = "<img src='ok_small.png'>";
            }
            else
            {
                nameObj.innerHTML = "<img src='err_small.png'>";
            }

        }
        function checktelephone() {
            var nameinput = document.getElementById("tele").value

            if (  (/^1[34578]\d{9}$/.test(nameinput)) ) {
                return "1";
            }
            else {
                return "0";
            }
        }

        function blur_passwd()
        {
            var nameObj = document.getElementById("result_pass2");
            var nameObj2 = document.getElementById("result_pass");
            var passflag = checkpassword();
            if (passflag === "1")
            {
                nameObj.innerHTML = "<img src='ok_small.png'>";
            }
            else
            {
                nameObj.innerHTML = "<img src='err_small.png'>";
            }
            nameObj2.innerHTML = " "

        }
        function checkpassword() {
            var passinput = document.getElementById("pass").value;
            l = passinput.length;
            if (  l <= 14 && l >= 6 && (!/\s/.test(passinput))) {
                return "1"
            }
            else {
                return "0";
            }

            }

        document.getElementById('usna').onblur = function () {
            $.ajax({
            url: 'http://127.0.0.1:5000/check_form',
            type: 'GET',
            async: true,
            data: {
                username: $('#usna').val()
            },
            timeout: 3000,
            dataType: 'json',

            success: function(data, textStatus, jqXHR) {
                console.log(data);
                if (data == 400) {
                    $("#result_name").html("<img src='err_small.png'> 请输入用户名");
                }
                else if (data == 300) {
                    $("#result_name").html("<img src='err_small.png'> 用户名已被占用");
                }
                else {
                    blur_username();
                }
			}
		
            })
        }
		

    </script>

</body>
</html>